<template>
  <div class="box-border" style="padding:5px 15px; ">
    <div id="monthChart" ref="lineChart" style="height:34vh;" />
  </div>
</template>

<script>
import { sysQuery } from '../../api/dataApi'
import { EventBus } from '../../../utils/eventBus.js'
export default {
  data() {
    return {
      personD: [],
      psname: '',
    }
  },
  // props: {
  //   psname: {
  //     type: String,
  //     default: '',
  //   },
  // },
  watch: {
    personD: {
      handler() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
    // psname(val) {
    //   this.getData(val)
    // },
  },
  mounted() {
    this.initChart()
    EventBus.$on('setPerson', (param1) => {
      this.psname = param1
      this.getData(this.psname)
    })
    //需要执行的代码
  },
  methods: {
    getData(val) {
      const that = this
      const header = {}
      // header['report.tableid'] = 'main@d_person'
      header['report.tableid'] = 'bne_chart_person'
      header['psname'] = val
      const params = {
        _params: JSON.stringify(header),
        // '@params': JSON.stringify(header),
        _conditions: {},
        pageSize: 20,
        pageIndex: 1,
        sortField: '',
        sortOrder: '',
      }
      sysQuery(params)
        .then((res) => {
          that.qThree(res.data)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.s01)
        _m.push(reportItem.s02)
        _m.push(reportItem.s03)
        _m.push(reportItem.s04)
        _m.push(reportItem.s05)
        _m.push(reportItem.s06)
        _m.push(reportItem.s07)
        _m.push(reportItem.s08)
        _m.push(reportItem.s09)
        _m.push(reportItem.s10)
        _m.push(reportItem.s11)
        _m.push(reportItem.s12)
        _m.push(reportItem.s13)
        _m.push(reportItem.s14)
        _reportData.push(_m)
      })
      this.personD = _reportData
    },
    initChart() {
      const myChart = this.$echarts.init(this.$refs.lineChart)
      const option = {
        title: {
          text: '负责人：' + this.psname,
          top: 5,
          left: 'left',
          textStyle: {
            fontSize: this.fitChartSize(14),
            color: '#fff',
            fontWeight: 'normal',
          },
        },
        grid: {
          top: '20%',
          left: '2%',
          right: '2%',
          bottom: '5%',
        },

        legend: {
          bottom: 5,
          data: ['Beijing'],
          itemGap: 20,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          selectedMode: 'single',
        },
        radar: {
          indicator: [
            { name: 'BENCH', max: 4 },
            { name: 'HVAC', max: 4 },
            { name: '环境箱', max: 4 },
            { name: '爆破箱', max: 4 },
            { name: '三综合试验箱', max: 4 },
            { name: '压力交变台', max: 4 },
            { name: '环模试验室', max: 4 },
            { name: '盐雾箱', max: 4 },
            { name: '振动台', max: 4 },
            { name: '噪声室', max: 4 },
            { name: '整车风量台', max: 4 },
            { name: 'chiller设备', max: 4 },
            { name: '实车台架', max: 4 },
            { name: '内部腐蚀试验箱', max: 4 },
          ],
          shape: 'circle',
          radius: '55%', //大小
          center: ['50%', '55%'],
          nameGap: 8,
          splitNumber: 5,
          axisName: {
            color: '#33ebff',
            with: 100,
            fontSize: this.fitChartSize(9),
            overflow: 'break',
          },
          // name: {
          //   textStyle: {
          //     fontSize: this.fitChartSize(9),
          //     color: '#33ebff',
          //   },

          //   formatter: function(value) {
          //     let list = value.split('')
          //     let result = ''
          //     for (let i = 1; i <= list.length; i++) {
          //       if (!(i % 5) && list[i] != undefined) {
          //         result += list[i - 1] + '\n'
          //       } else {
          //         result += list[i - 1]
          //       }
          //     }
          //     return result
          //   },
          // },

          splitLine: {
            lineStyle: {
              color: [
                'rgba(51, 204, 255, 0.1)',
                'rgba(51, 204, 255, 0.2)',
                'rgba(51, 204, 255, 0.4)',
                'rgba(51, 204, 255, 0.6)',
                'rgba(51, 204, 255, 0.8)',
                'rgba(51, 204, 255, 1)',
              ].reverse(),
            },
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(51, 204, 255, 0.5)',
            },
          },
        },
        series: [
          {
            name: '人员',
            type: 'radar',
            lineStyle: {
              width: 1,
              opacity: 0.5,
            },
            data: this.personD,
            symbol: 'none',
            itemStyle: {
              // color: '#F9713C',
              color: '#33ebff',
            },
            areaStyle: {
              opacity: 0.1,
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
